import "./LoadingComponent.css";
import {Flex} from "antd";

const LoadingComponent = () => {

    return (
        <Flex
            justify={"center"}
            align={"center"}
            style={{
                margin: "20px"
            }}
            gap={25}
        >
            <div style={{}} className="breeding-rhombus-spinner">
                <div className="rhombus child-1"></div>
                <div className="rhombus child-2"></div>
                <div className="rhombus child-3"></div>
                <div className="rhombus child-4"></div>
                <div className="rhombus child-5"></div>
                <div className="rhombus child-6"></div>
                <div className="rhombus child-7"></div>
                <div className="rhombus child-8"></div>
                <div className="rhombus big"></div>
            </div>

            {/*<div className="atom-spinner">*/}
            {/*    <div className="spinner-inner">*/}
            {/*        <div className="spinner-line"></div>*/}
            {/*        <div className="spinner-line"></div>*/}
            {/*        <div className="spinner-line"></div>*/}
            {/*        <div className="spinner-circle">&#9679;</div>*/}
            {/*    </div>*/}
            {/*</div>*/}

            <div style={{fontSize: "20px"}}>
                页面数据加载中...
            </div>
        </Flex>
    );
};

export default LoadingComponent;